<template>
  <div id="ContactUs">
    <p>联系我们</p>
    <p>Contact us</p>
    <p>长春朝阳区工农大路825号</p>
    <div v-for="item in contact_map" :key="item.id" class="contect-div">
      <span class="contact_name">{{item.name}}</span><br/>
      <div class="contact_tel">
        <span>{{item.telephone_num_1}}</span>
        <span>{{item.telephone_num_2}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import baseConfig from 'baseConfig'
export default {
  name: 'ContactUs',
  data () {
    return {
      contact_map: baseConfig.contact_map,
    }
  }
}
</script>

<style lang="scss" scoped>
  @import 'publicLib/scss/defualtScss.scss';

  #ContactUs{
    width: 100%;
    padding: 0.5rem;
    margin: 1rem 0;
    font-size: $font-size-default;
    white-space: nowrap;


    p:first-child, p:nth-child(2){
      font-size: 1.2rem;
      color: $contect-us-color;
      font-weight: bold;
    }

    p:nth-child(3){
      margin: 0.5rem 0;
    }

    .contect-div{
      .contact_name{
        float: left;
        margin: 0.5rem 1.9rem 0 1rem;
        display: block;
      }

      .contact_tel{
        margin-left:30px ;
        margin-top: 0.7rem;

        span:first-child{
          display: block;
        }
      }
    }

    .contect-div:nth-child(10) {
      .contact_name {
        float: left;
        margin: 0.5rem 0.3rem 0 1rem;
        display: block;
      }
    }
    .contect-div:nth-child(11){
      .contact_name{
        float: left;
        margin: 0.5rem 1rem 0 1rem;
        display: block;
      }
    }
  }
</style>
